<template>
    <my-layout>
        <template v-slot:header>
            <el-input v-model='query.name' placeholder="输入产品名字查询" size='small'/>
            <el-button type="primary" size='small' @click='queryEvt'>查询</el-button>
            <el-button type="primary" size='small' @click='editEvt(row)'>新增</el-button>
        </template>
        <el-table :data="tableData"
            style="width: 100%"
            size='small'
            height='100%'>
            <el-table-column prop="name" label="供应商名字" width="150" fixed='left' align='center'/>
            <el-table-column prop="state" label="状态" width="100"  align='center'>
                <template v-slot="data">
                    <div class="product-state">
                        {{data.row.state | typeFilter(stateType)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="采购优先级" width="150" align='center'/>
            <el-table-column prop="director" label="负责人" width="100" align='center'/>
            <el-table-column prop="code" label="信用码" width="200" align='center'/>
            <el-table-column prop="devices_state" label="设备状态" width="150" align='center'/>
            <el-table-column prop="production" label="产地" width="180" align='center'/>
            <el-table-column prop="state" label="操作" width="180" fixed='right' align='center'>
                <template slot-scope="{row}">
                      <el-button type="text" size="small" @click='detailEvt(row)'>详情</el-button>
                      <el-button type="text" size="small" @click='editEvt(row)'>编辑</el-button>
                      <el-button type="text" size="small" v-if="row.state === 'Y'" @click='changeStateEvt(row)'>取消</el-button>
                      <el-button type="text" size="small" v-else @click='changeStateEvt(row)'>审批</el-button>
                </template> 
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination
                :page-sizes="[20,50,100,150]"
                :page-size="query.size"
                small
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page='query.page'
                @size-change='sizeChange'
                @current-change='currentChange'>
            </el-pagination>
        </template>

        <el-dialog
            :title="title"
            :visible.sync="dialogShow"
            width="50%"
            append-to-body>
            <span v-html="text"></span>
            <el-input  type="textarea" style="margin-top:1rem ;" :autosize="{ minRows: 2}" v-model="data.remark"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="approverEvt">确 定</el-button>
            </span>
        </el-dialog>

    </my-layout>
</template>
<script>
import { supplierApprove, supplierListApi } from '@/apis/purchase'
import { dictListApi } from '@/apis/productApi'
export default {
    data(){
        return {
            tableData: [],
            total:0,
            query:{
                name:'',
                state:'',
                page:1,
                size:20,
            },
            changeTimer:null,
            stateType:[],
            dialogShow:false,
            data:{
                approve_id: "",
                user_id: "",
                user_name: "",
                result: "Y",
                remark: ""
            },
            title:'',
            text:'',
            

        }
    },
    filters:{
      typeFilter(val,types){
        let dict = types.find(it=>it.code === val)
        if(!dict) return val
        return dict.name
      },
    },
    async mounted(){
        
        dictListApi('STATE').then(d=>{
            if(d.code===200) this.stateType = d.data.rows
        })
        this.getList()
    },
    methods:{
        //定义获取数据的方法
        async getList(){
            let result = await supplierListApi(this.query)
            if(result.code === 200 ){
            //   console.log(result.data.rows) 
            this.tableData = result.data.rows
            this.total = result.data.count
            console.log(this.tableData) 

            }
        },
        async queryEvt(){
            this.query.page = 1
            this.getList()
        },
        sizeChange(size){
            this.query.size = size
            if(this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
            this.getList()
            })
            console.log(this.query.page,this.query.size)
        },
        currentChange(page){
            this.query.page = page
            if(this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
            this.getList()
            })
            console.log(this.query.page,this.query.size)
        },
        editEvt(data){
            console.log(data)
            this.$router.push('/purchase/supplier/edit')
        },
        detailEvt(data) {
            this.$router.push('/purchase/supplier/detail?id='+data.id)
        },
        changeStateEvt(it){
            this.data.approve_id=it.id
            let userInfo = this.$store.getters['common/userInfo'] 
            this.data.user_id=userInfo.id
            this.data.user_name=userInfo.name
            if (it.state=='Y'){
                this.title='确认解除关系'
                this.text='确定要与此供应商解除合作关系？'
            }else{
                this.title='确认建立关系'
                this.text='确定要与此供应商建立合作关系？'
            }
            this.dialogShow=true
            console.log(it)
        },
        async approverEvt(){
            console.log(this.data)
            debugger
            supplierApprove(this.data).then(d=>{
                console.log(d)
                this.getList()
                this.dialogShow = false
                this.$message.success('操作成功')
            })
            
        }
    }
}
</script>
<style lang="less" scoped>
    .el-input{
      width:11rem;
      margin-right: .5rem;
  }
  .product-state{
    &::before{
      content:"";
      display: inline-block;
      border-radius:6px;
      width: 6px;
      height: 6px;
      background: #999;
      margin-left:6px;
      margin-right:6px;
      vertical-align: middle;
    }
  }
</style>
